define(function (require, exports, module) {   
    var FolderListItem = React.createClass({
        getInitialState: function() {
            var node = this.props.node;
            return {        
                selected: false,
                mouseover: false
            };
        },   
        componentDidMount: function(){    
        },
        handleMouseOver: function() {
            this.setState({
                mouseover : true
            });
        },
        handleMouseOut: function() {
             this.setState({
                mouseover : false
            });
        },
        handleClick: function(){      
            $(this.props.folderList.getDOMNode()).trigger("clickItem", this.props.node);      
            if (this.props.node !== "cmis:folder"){
                this.toggleSelected();
            }
        },  
        toggleSelected: function(id, event) {       
            var selected = !this.state.selected;
            var oldSelectedItem = this.props.folderList.oldSelectedItem;
            if (selected) {                       
                if (oldSelectedItem && oldSelectedItem !== this) {
                    oldSelectedItem.setState({
                        selected: false
                    });              
                }
                this.props.folderList.oldSelectedItem = this;
            }
            else {
                if (oldSelectedItem && oldSelectedItem === this){
                    this.props.folderList.oldSelectedItem = null;
                }
            }
            this.setState({
                selected: selected
            });
        },
        render: function () {
            var node = this.props.node;
            var description = '';
            if (node.description) {
                description = node.description;
            }
            var style = {
                backgroundColor: this.state.mouseover? "#9accef":"",
                color: this.state.mouseover? "#ffffff":""
            };
            var styleAction = {
                display: this.state.mouseover ? 'block' : 'none',
            };

            var action;
            if (node.type == 'cmis:folder') {
            } else{
                action  = (
                    <div className="covering-layer" style={styleAction}><i className="fa fa-lock fa-lg"></i></div>
                )
            }

            var classes = {
                'fa fa-file-text-o' : (node.type != 'cmis:folder'),
                'fa fa-folder' : (node.type == 'cmis:folder')
            }
                  
            return (
                <div data-objid = {node.id} className={classNames("maillist_item_wrap", {'color-blue-e': this.state.selected})} style={style} onClick={this.handleClick} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
                    {action}
                    <span className="item-title"><i className={classNames(classes)}></i>{node.name}</span>
                    <p className="abstract"></p><span className="some-message"><span className="owner">拥有者：{node.owner}</span><span className="time">更新时间：{node.time}</span></span>
                </div>
            )
        }
    });

    var FolderList = React.createClass({
        getInitialState: function () {
            return {
                mouseover: false
            };
        }, 

        componentDidMount: function() {          
            $(this.getDOMNode()).data("getSelectedItem", function() {
                if (this.oldSelectedItem) {
                    return this.oldSelectedItem.props.node;
                }
                return null;
            }.bind(this));
         },
        render: function () {       
            var data = this.props.data;
            var option = this.props.option;
            var childern = [];        
            var _this = this;
            if (data.data) {          
                _.each(data.data, function(node) {               
                    childern.push(<FolderListItem node={node} key={node.id} folderList={_this}></FolderListItem>)                
                });
            }     
            return (
                <div className="maillist_content_wrap scroll_auto_y">
                    {childern}
                </div>
            )
        }
    });

    return FolderList;
})